<template>
    <div class="xm-item" @click="$emit('toDetail', item.id)">
        <div class="item-header">
            <img class="avatar" :src="item.avatar" alt="" />
            <div class="header-right">
                <p class="title van-ellipsis">{{ item.stem }}</p>
                <p>{{ item.creator }} | {{ item.createdAt }}</p>
            </div>
        </div>
        <div class="item-content">{{ plainContent }}</div>
        <div class="item-footer">
            点赞 {{ item.likeCount }} | 浏览 {{ item.views }}
        </div>
    </div>
</template>

<script>
export default {
  name: 'XmItem',
  props: {
    item: Object,
    default: () => {}
  },
  computed: {
    plainContent () {
      // 使用正则表达式去除 HTML 标签
      return this.item.content
        ? this.item.content.replace(/<[^>]+>/g, '')
        : ''
    }
  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.xm-item {
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
    .item-header {
        display: flex;
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
        .header-right {
            flex: 1;
            overflow: hidden;
            font-size: 12px;
            color: #999;
            margin-left: 10px;
            p {
                margin: 0;
            }
            .title {
                font-size: 14px;
                color: #000;
            }
        }
    }

    .item-content {
        // 超出两行显示...
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 设置行数 */
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px !important;
        color: #686868 !important;
        line-height: 20px;
        margin: 12px 0;

        > p {
            margin: 0;
        }
    }
    .item-footer {
        color: #999;
        font-size: 12px;
    }
}
</style>
